{extend name='main'}

{block name="button"}
<button class='layui-btn layui-btn-sm layui-btn-primary'>登 录</button>
{/block}

{block name='content'}
<style>

    .plugin-header-name {
        font-size: 22px;
        font-weight: 500
    }

    .plugin-header-desc {
        color: #999;
        font-size: 14px;
        margin-top: 8px;
    }

    .item-title {
        color: #67f;
        margin: 30px 0 20px 0;
        padding: 10px 10px 10px 8px;
        font-size: 15px;
        background: #fafafa;
        line-height: 1.5em;
        font-weight: bold;
        border-top: 1px #e1baa2 dashed;
        border-bottom: 1px #e1baa2 dashed;
    }

    .item-title .layui-icon {
        color: #67f;
        margin-right: 6px;
    }

    .ck-content img {
        max-width: 300px;
    }
</style>

<div class="layui-card think-box-shadow">
    <div class="layui-card-body">
        <div class="plugin-header text-center">
            <div class="plugin-header-name">{$data.name|default=''}</div>
            <div class="plugin-header-desc">{$data.remark|default=''}</div>
        </div>
    </div>
</div>

<link rel="stylesheet" href="__ROOT__/static/plugs/ckeditor5/content.css">
<div class="layui-card think-box-shadow">
    <div class="layui-card-body">
        <div>
            <div class="layui-form-item">
                <b>插件名称：</b>
                <span class="font-s16">{$data.name|default=''}</span>
            </div>
            <div class="layui-form-item">
                <b>插件标识：</b>
                <code class="layui-badge think-bg-gray">{$data.code|default=''}</code>
            </div>
            <div class="layui-form-item">
                <b>插件包名：</b>
                <code class="layui-badge think-bg-gray pointer" data-copy>{$data.package|default=''}</code>
            </div>
            <div class="layui-form-item">
                <b>安装方式：</b>
                <span class="layui-badge think-bg-blue">{$data.type_name|default=''}</span>
            </div>
            <div class="layui-form-item">
                <b>支持平台：</b>
                {foreach $data.platforms_name as $type=>$name}
                <span class="layui-badge think-bg-blue">{$name}</span>
                {/foreach}
            </div>
            {notempty name='data.version'}
            <div class="layui-form-item">
                <b>已经安装：</b>
                <span class="layui-badge think-bg-blue">{$data.version}</span>
            </div>
            {else}
            <div class="layui-form-item">
                <b>立即安装：</b>
                <code class="layui-badge think-bg-gray pointer" data-copy>composer require {$data.package|default=''}</code>
            </div>
            {/notempty}
        </div>
        <div>
            <div class="layui-form-item">
                <div class="item-title">
                    <i class="layui-icon layui-icon-diamond"></i>插件描述
                </div>
                <div class="ck-content">{$data.content|default=''|raw}</div>
            </div>

            <div class="layui-form-item">
                <div class="item-title">
                    <i class="layui-icon layui-icon-console"></i>插件版本
                </div>
                <ul class="layui-timeline">
                    {foreach $data.versions as $ver}
                    <li class="layui-timeline-item">
                        <i class="layui-icon layui-timeline-axis">&#xe63f;</i>
                        <div class="layui-timeline-content layui-text">
                            <h2 class="layui-timeline-title">
                                {$ver.version}<span class="margin-left-15 layui-badge-rim">{$ver.create_at|default=''}</span>
                            </h2>
                            <div class="ck-content">{$ver.content|default=''|raw}</div>
                        </div>
                    </li>
                    {/foreach}
                    <li class="layui-timeline-item">
                        <i class="layui-icon layui-timeline-axis">&#xe63f;</i>
                        <div class="layui-timeline-content layui-text">
                            <div class="layui-timeline-title">
                                孵化<span class="margin-left-15 layui-badge-rim">{$data.create_at|default=''}</span>
                            </div>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</div>
{/block}